﻿<!DOCTYPE html>
<html>
<head>
    <title>Lava:  Html Editor</title>
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <link href='../css/demos.css' rel='stylesheet' type='text/css'>
    <style type="text/css">
        #editor { float:left;width:500px;height:500px;margin:50px;margin-top:0px;padding:10px }
        #preview { float:left;width:500px;height:500px;margin:50px;margin-top:0px;padding:10px;overflow:auto }
    </style>
    <script src="../scripts/lava.js" type="text/javascript"></script>
    <script type="text/javascript">
        var Editor = Lava.Controller({
            html: '<div style="background-color:#950000;height:100px;width:250px;color:#FFF;line-height:100px;text-align:center;border-radius:4px">This is a div...</div>'
        });
    </script>
</head>
<body>
    <div class="content">
        <h1>Html Editor Demo</h1>
        This demo shows how you can bind to the html property which ties to the element's innerHTML.
    </div>
    <textarea id="editor" class="textarea" data-bind="{value: Editor.html}"></textarea>
    <div id="preview" data-bind="{html: Editor.html}"></div>
</body>
</html>
